<template>
    <div id="map" class="mapContainer"></div>
</template>
<script setup>
import {onMounted} from 'vue'
import { Feature, Map, View } from 'ol';
import TileLayer from "ol/layer/Tile.js";
import XYZ from 'ol/source/XYZ.js';
import ZoomToExtent from 'ol/control/ZoomToExtent.js';
import ZoomSlider from 'ol/control/ZoomSlider.js';
import FullScreen from 'ol/control/FullScreen.js';
import Style from 'ol/style/Style.js';
import CircleStyle from 'ol/style/Circle.js';
import Fill from 'ol/style/Fill.js';
import Stroke from 'ol/style/Stroke.js';
import { Point } from 'ol/geom';
import VectorSource from 'ol/source/Vector.js';
import VectorLayer from 'ol/layer/Vector';
onMounted(() => {
    // 3.初始化一个高德图层
    const gaode = new TileLayer({
        title: "高德地图",
        source: new XYZ({
            url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
            wrapX: false
        })
    });
    const map = new Map({
        // 将初始化的地图设置到id为map的DOM元素上
        target: "map",
        // 设置图层
        layers: [gaode],
        view: new View({
            center: [113.25589282043693, 21.89897070201314],
            // 设置地图放大级别
            zoom: 14,
            projection: "EPSG:4326"
        })
    })
    // 视图跳转控件
    const zoomToExtent = new ZoomToExtent({
        extent: [113.20956348921601, 21.863189834881656, 113.305570130008, 21.983070782352733]
    })
    // 放大缩小控件
    const zoomslider = new ZoomSlider();
    // 全屏控件
    const fullScreen = new FullScreen();
    map.addControl(zoomToExtent)
    map.addControl(zoomslider)
    map.addControl(fullScreen)
    // 1.通用样式信息和几何信息构建点要素
    // 构建圆点
    const point1 = new Feature({
        geometry: new Point([113.25589282043693, 21.89897070201314])
    })
    // 设置样式信息
    let style = new Style({
        image: new CircleStyle({
            // radius设置点的半径 单位degree
            radius: 10,
            fill: new Fill({
                color: "#ff2d51"
            }),
            stroke:new Stroke({
                width:2,
                color:"#333"
            })
        })
    })
    point1.setStyle(style);
    // 2.将要素添加到矢量数据源
    let source = new VectorSource({
        features: [point1]
    })
    // 3.将矢量数据源添加到矢量图层
    let layer = new VectorLayer({
        source
    })
    // 4.添加矢量图层到地图容器
    map.addLayer(layer)
    map.on('moveend', e => {
        console.log("🚀 ~ onMounted ~ e:", e);
    })
    map.on('rendercomplete', () => {
        console.log('渲染完成');
    })
    map.on('click', e => {
        console.log('地图点击', e);
    })
})
</script>
<style scoped lang=scss>
    .mapContainer {
        width: 100%;
        height: 100%;
        /deep/ .ol-zoomslider {
            top: 7em;
        }
    }
</style>